<template>
    <div>
        <my-header></my-header>
        <div style="margin-top:100px;max-width: 1000px;margin-left: auto;margin-right: auto">
            <div id="shop_car">
                <section class="car_main">
                    <!--顶部列表-->
                    <div class="car_head">
                        <ul class="car_top">
                            <li style="width: 14%;padding-left: 20px">
                                <input type="checkbox" id="check_all" v-model="checked_all"
                                       @click="all_products_checked"/>
                                <label for="check_all">全选</label>
                            </li>
                            <li style="width: 22%;text-align:center;">商品信息</li>
                            <li style="width: 16%;text-align:center;">作者</li>
                            <li style="width: 10%;text-align:center;">单价</li>
                            <li style="width: 12%;text-align:center;">数量</li>
                            <li style="width: 4%;text-align:center;">金额</li>
                            <li style="width: 16%;text-align:center;">操作</li>
                        </ul>
                    </div>
                    <!--购物车为空时展示页面-->
                    <template v-if="goods.length ==  0">
                        <div class="cart_empty">
                            您的购物车还是空的哦，快去挑选您喜欢的东西吧.
                        </div>
                    </template>
                    <!--购物车详情展示-->
                    <template v-else>
                        <div v-for="(shop,shop_index) in goods">

                            <!--当店铺下面有已购买商品的时候显示该店铺和商品信息-->
                            <div v-if="shop.list.length != 0">
                                <div v-for="(product,product_index) in shop.list" class="product"
                                     v-bind:class="[product.product_checked ? 'selected_styles' : '']">
                                    <div class="product_description" v-if="product.product_description != ''">
                                        <div class="product_description_bg">{{product.product_description}}</div>
                                    </div>
                                    <div class="product_details">

                                        <!--商品是否选中-->
                                        <div class="product_check">
                                            <input type="checkbox" v-model="product.product_checked"
                                                   @click="product_checked_click(product,shop_index)"/>
                                        </div>

                                        <!--商品图片-->
                                        <div class="product_img">
                                            <img :src="product.url" style="width: 100px;height: 100px"/>
                                        </div>

                                        <!--商品名称-->
                                        <div class="product_shop_info">
                                            <div class="product_shop_name">
                                                <a :href="product.href">{{product.product_name}}</a>
                                            </div>
                                        </div>

                                        <!--作者-->
                                        <div class="product_type_select">
                                            <div style="margin-left: 54px;height: 100%;display: flex;align-items: center">
                                                {{product.author}}
                                            </div>
                                        </div>

                                        <!--商品单价-->
                                        <div class="product_price">
                                            <div class="product_price_current">
                                                ￥{{product.price | priceFilter}}
                                            </div>
                                        </div>

                                        <!--商品数量-->
                                        <div class="product_number">
                                            <div class="product_number_content">
                                                <div class="product_number_button">
                                                    <button v-if="product.number > 1"
                                                            @click="product_reduce(shop_index,product_index)">-
                                                    </button>
                                                </div>
                                                <div class="product_number_input">
                                                    <input type="number" v-model="product.number" readonly/>
                                                </div>
                                                <div class="product_number_button"
                                                     @click="product_add(shop_index,product_index)">
                                                    <button>+</button>
                                                </div>
                                            </div>
                                        </div>

                                        <!--金额统计-->
                                        <div class="product_amount">
                                            <div class="product_total_price">￥{{
                                                product_total_price(shop_index,product_index) | priceFilter}}
                                            </div>
                                        </div>

                                        <!--操作选项-->
                                        <div class="product_operation">
                                            <div>
                                                <button @click="product_del(shop_index,product_index)">删除</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <!--底部页面-->
                    <div class="car_foot_bar">
                        <div class="car_foot_settle">
                            <div class="piece">已选商品 <strong class="piece_num">{{selected_products}}</strong> 件</div>
                            <div class="totalMoney">合计 (不含运费) : <strong class="total_text">{{total_amount |
                                priceFilter}}</strong> 元
                            </div>
                            <div class="settle_accounts">
                                <button class="settle_button" :disabled="selected_products == 0 ? true : false"
                                        @click="modal = true">
                                    买单
                                </button>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <Modal
                    title="请选择收货地址"
                    v-model="modal"
                    class-name="vertical-center-modal"
                    @on-ok="shop_settle()">
                <div>
                    <span>收货地址:</span>
                    <div style="margin-top:10px">
                        <Select v-model="sheng" style="width:140px" @on-change="choseProvince" placeholder="省级地区">
                            <Option v-for="item in province" style="width:100%" :value="item.id" :key="item.id">{{
                                item.value }}
                            </Option>
                        </Select>
                        <Select v-model="shi" style="width:140px" @on-change="choseCity" placeholder="市级地区">
                            <Option v-for="item in shi1" style="width:100%" :value="item.id" :key="item.id">{{
                                item.value }}
                            </Option>
                        </Select>
                        <Select v-model="qu" style="width:140px" placeholder="区级地区">
                            <Option v-for="item in qu1" style="width:100%" :value="item.id" :key="item.id">{{ item.value
                                }}
                            </Option>
                        </Select>
                        <Input v-model="detailLocation"
                               style="margin-top:10px;width:60%;max-width: 400px;display: block" placeholder="街道信息"
                               class="detail_position"/>
                    </div>
                </div>
                <div style="margin-top:16px">
                    <span>姓名:</span>
                    <Input v-model="userName" style="width:40%;" placeholder="姓名" class="detail_position"/>
                </div>
                <div style="margin-top:16px">
                    <span>联系电话:</span>
                    <Input v-model="userPhone" style="width:40%;" placeholder="联系电话" class="detail_position"/>
                </div>
            </Modal>
        </div>
        <div class="my_footer">
            <div style="display: inline">
                <img src="../../assets/logo2.png" class="logo">
                <img src="../../assets/logo1.jpg" class="logo">
                <img src="../../assets/logo3.png" class="logo">
            </div>
            <div class="footer_info">
                联系方式: 18044433322<br>
                ©Copyright 2018 淘书科技公司版权所有 | 上海ICP备12438170号-4
            </div>
        </div>
    </div>
</template>

<script>
    import myHeader from '../../components/header'
    import {city} from '../../assets/cityData'

    export default {
        name: 'shoppingCart',
        components: {
            myHeader
        },
        data() {
            return {
                modal: false,
                province: [],
                shi1: [],
                qu1: [],
                detailLocation: "",
                sheng: '',
                shi: '',
                qu: '',
                userName: "",
                userPhone: "",
                goods: [
                    {
                        shop_name: '现在就一家店',
                        url: '店铺icon路径，现在不需要',
                        href: '店铺路径，现在不需要',
                        all_checked: false,//是否全选了这家店的东西
                        list: [
                            {
                                product_id: 1,
                                product_name: 'C语言从入门到放弃',
                                url: 'https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268/sign=2279bb7f970a304e5222a7fce9c9a7c3/ac6eddc451da81cbe6bd4cb65266d01609243176.jpg',
                                href: '#',
                                author: "刘爽",
                                price: 32.80,
                                number: 1,
                                product_checked: false,
                            },
                            {
                                product_id: 2,
                                product_name: '计算机基础组成原理',
                                url: 'https://img.alicdn.com/imgextra/i2/1829439158/TB1Twj3v8yWBuNkSmFPXXXguVXa_!!0-item_pic.jpg_430x430q90.jpg',
                                href: '#',
                                author: "刘爽",
                                price: 36.80,
                                number: 1,
                                product_checked: false,
                            }
                        ]
                    }
                ],
                // 其他属性数据
                checked_all: false,
                choosed: []
            }
        },
        created() {
            this.getCityData();
        },
        methods: {
            getCityData() {
                var that = this;
                let data = city;
                that.province = [];
                that.city = [];
                that.block = [];
                // 省市区数据分类
                for (var item in data) {
                    if (item.match(/0000$/)) {//省
                        that.province.push({id: item, value: data[item], children: []})
                    } else if (item.match(/00$/)) {//市
                        that.city.push({id: item, value: data[item], children: []})
                    } else {//区
                        that.block.push({id: item, value: data[item]})
                    }
                }
                // 分类市级
                for (var index in that.province) {
                    for (var index1 in that.city) {
                        if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
                            that.province[index].children.push(that.city[index1])
                        }
                    }
                }
                // 分类区级
                for (var item1 in that.city) {
                    for (var item2 in that.block) {
                        if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
                            that.city[item1].children.push(that.block[item2])
                        }
                    }
                }
            },
            // 结算
            shop_settle() {
                var formData = new Object();
                console.log(this.province)
                console.log(this.shi1)
                console.log(this.qu1)
                var choosed = new Array();//重新获取一遍数据，不在computed里面写是防止那边有BUG导致数据异常,这里的遍历能保证百分百是最终结果
                for (var i in this.goods) {
                    var shop = this.goods[i];
                    for (var j in shop.list) {
                        var good = shop.list[j]
                        if (good.product_checked) {
                            var temp = new Object();
                            temp.productid = good.product_id;
                            temp.num = good.number;
                            choosed.push(temp);
                        }
                    }
                }
                formData.choosed = choosed;
                formData.sheng = city[this.sheng];
                formData.shi = city[this.shi];
                formData.qu = city[this.qu];
                formData.detailLocation = this.detailLocation;
                formData.userName = this.userName;
                formData.userPhone = this.userPhone;
                formData.address = formData.sheng + " " + formData.shi + " " + formData.qu + " " + this.detailLocation;
                console.log(formData);
            },

            // 商品总价
            product_total_price(shop_index, product_index) {
                var product = this.goods[shop_index].list[product_index]
                return product.number * product.price
            },

            // 减购商品，每次减少1
            product_reduce(shop_index, product_index) {
                var product = this.goods[shop_index].list[product_index]
                if ((product.number - 1)) {
                    product.number--
                }
            },

            // 加购，每次加1
            product_add(shop_index, product_index) {
                var product = this.goods[shop_index].list[product_index]
                if ((product.number + 1) < 100) {
                    product.number++
                }
            },

            // 删除购买商品
            product_del(shop_index, product_index) {
                this.goods[shop_index].list.splice(product_index, 1)
            },

            // 店铺下属商品全部选择时
            shop_all_check(shop_index) {
                var shop = this.goods[shop_index]
                shop.all_checked = !shop.all_checked
                for (var i = 0; i < shop.list.length; i++) {
                    shop.list[i].product_checked = shop.all_checked;
                }
            },

            // 商品选择时
            product_checked_click(product, shop_index) {
                product.product_checked = !product.product_checked

                // 检测是否该店铺内的商品全选
                for (var i = 0; i < this.goods[shop_index].list.length; i++) {
                    if (!this.goods[shop_index].list[i].product_checked) {
                        this.goods[shop_index].all_checked = false
                        this.checked_all = false
                        return;
                    }
                }
                this.goods[shop_index].all_checked = true

                // 检测购物车内的商品是否全部选中
                for (var i = 0; i < this.goods.length; i++) {
                    if (!this.goods[i].all_checked) {
                        this.checked_all = false
                        return
                    }
                }
                this.checked_all = true
            },

            // 检测购物车内的商品全部
            all_products_checked() {
                this.checked_all = !this.checked_all
                for (var i = 0; i < this.goods.length; i++) {
                    this.goods[i].all_checked = this.checked_all
                    for (var j = 0; j < this.goods[i].list.length; j++) {
                        this.goods[i].list[j].product_checked = this.checked_all
                    }
                }
            },

            choseProvince(e) {
                for (var index2 in this.province) {
                    if (e === this.province[index2].id) {
                        this.shi1 = this.province[index2].children;
                        this.qu1 = this.province[index2].children[0].children;
                    }
                }
                this.shi = '';
                this.qu = '';
            },
            choseCity: function (e) {
                for (var index3 in this.city) {
                    if (e === this.city[index3].id) {
                        this.qu1 = this.city[index3].children;
                    }
                }
            },
        },
        filters: {
            // 金额显示过滤 两位小数点，不足补0
            priceFilter(value) {
                var value = Math.round(parseFloat(value) * 100) / 100;
                var xsd = value.toString().split(".");
                if (xsd.length == 1) {
                    value = value.toString() + ".00";
                    return value;
                }
                if (xsd.length > 1) {
                    if (xsd[1].length < 2) {
                        value = value.toString() + "0";
                    }
                    return value;
                }
            }
        },
        computed: {
            // 已选择商品数目
            selected_products() {
                var selected_products = 0
                for (var i = 0; i < this.goods.length; i++) {
                    var product = this.goods[i].list
                    for (var j = 0; j < product.length; j++) {
                        if (product[j].product_checked) {
                            selected_products++
                        }
                    }
                }
                return selected_products
            },

            // 购买商品总金额
            total_amount() {
                var total_price = 0.00
                for (var i = 0; i < this.goods.length; i++) {
                    var product = this.goods[i].list
                    for (var j = 0; j < product.length; j++)
                        if (product[j].product_checked) {
                            total_price += product[j].number * product[j].price
                        }
                }
                return total_price
            },
            // 购物车全选
            all_checked() {
                for (var i = 0; i < this.goods.length; i++) {
                    if (!this.goods[i].all_checked) {
                        return false
                    }
                }
                return true
            }
        }
    }
</script>

<style scoped>

    .vertical-center-modal {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80%;
    }

    .ivu-modal {
        top: 0;
    }

    .car_main {
        position: relative;
        width: 980px;
        margin: 0px auto;
        padding: 0px 0px;
        min-height: 250px;
    }

    .car_head {
        width: 100%;
        height: 45px;
        line-height: 45px;
        color: #3c3c3c;
        font-size: 14px;
        padding: 0px;
        border-bottom: 1px solid #DCDCDC;
    }

    .car_top {
        width: 100%;
        height: 50px;
    }

    ul {
        list-style: none;
    }

    li {
        float: left;
        text-align: left;
    }

    .car_check_all {
        position: relative;
        width: 10%;
        left: 20px;
    }

    .car_check_all input[type="checkbox"] {
    }

    .car_check_all label {
    }

    .car_information {
        width: 20%;
        margin-left: 10%;
    }

    .car_price {
        width: 10%;
        margin-left: 2%;
    }

    .car_eachprice {

    }

    .car_number {
        width: 6%;
        margin-left: 4%;
    }

    .car_amount {
        width: 11%;
        margin-left: 10%
    }

    .cart_empty {
        position: absolute;
        width: 100%;
        top: 50%;
        text-align: center;
    }

    .car_foot_bar {
        width: 100%;
        height: 45px;
        font-size: 14px;
        color: #3c3c3c;
        margin-top: 15px;
        margin-bottom: 10px;
    }

    .car_foot_settle {
        float: right;
    }

    .piece {
        float: left;
        height: 45px;
        line-height: 45px;
        padding-top: 1px;
    }

    .totalMoney {
        float: left;
        margin-left: 20px;
        height: 45px;
        line-height: 45px;
    }

    .settle_accounts {
        float: left;
        margin-left: 20px;
        height: 45px;
        line-height: 45px;
    }

    .piece_num {
        color: red;
    }

    .total_text {
        color: red;
        font-size: 18px;
    }

    .settle_button {
        width: 100px;
        height: 45px;
        line-height: 45px;
        border: none;
        outline: none;
        background-color: rgba(255, 0, 0, 0.76);
        color: white;
    }

    .settle_button:disabled {
        background-color: #eeefff;
    }

    .shop_info {
        width: 100%;
        height: 20px;
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 12px;
        align-items: center;
        display: flex;
    }

    .shop_info_check_all {
        position: relative;
        width: 10px;
        left: -20px;
    }

    .shop_info li a {
        text-decoration: none;
        margin-right: 10px;
        color: #3c3c3c;
    }

    .shop_info li a:hover {
        color: red;
        text-decoration: underline;
    }

    .shop_icon {
        width: 16px;
        height: 16px;
    }

    .shop_discount {
        width: 60px;
        height: 20px;
        margin-left: 10px;
    }

    .product {
        width: 100%;
        border: 1px solid #DCDCDC;
        background: #F5F5F5;
    }

    .selected_styles {
        background: lightgoldenrodyellow;
    }

    .product_details {
        width: 100%;
        height: 145px;
        padding-left: 20px;
    }

    .product_description {
        width: 100%;
        height: 25px;
        background: white;
        font-size: 12px;
        padding-left: 50px;
        align-items: center;
        display: flex;
    }

    .product_description_bg {
        width: fit-content;
        background: #eee;
        height: 20px;
        line-height: 20px;
    }

    .product_check {
        float: left;
        margin-top: 38px;
        margin-right: 10px;
        padding-top: 20px;
    }

    .product_img {
        float: left;
        padding-top: 20px;
    }

    .product_shop_info {
        height: 100%;
        float: left;
        padding-left: 10px;
        position: relative;
        width: 220px;
        padding-right: 10px;
        padding-left: 20px;
    }

    .product_shop_name {
        font-size: 12px;
        text-align: left;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .product_shop_name a {
        text-decoration: none;
        letter-spacing: 2px;
        color: #3c3c3c;
        align-content: left;
    }

    .product_shop_name a:hover {
        color: red;
        text-decoration: underline;
    }

    .product_shop_icon {
        position: absolute;
        bottom: 0px;
        width: fit-content;
    }

    .product_type_select {
        width: 155px;
        height: 100%;
        font-size: 12px;
        text-align: left;
        float: left;
        position: relative;
        color: #3c3c3c;
    }

    .product_type_all:first-child {
        padding-top: 20px;
    }

    .product_type {
        width: 125px;
        margin-bottom: 10px;
        margin-left: 15px;
    }

    .product_edit {
        width: fit-content;
        position: absolute;
        top: 0;
        right: 0;
    }

    .product_edit_button {
        color: white;
        background: red;
        border: none;
        outline: none;
    }

    .product_price {
        width: 105px;
        height: 100%;
        float: left;
        text-align: left;
        padding-left: 20px;
    }

    .product_price_origin {
        width: fit-content;
        font-size: 14px;
        color: grey;
        text-decoration: line-through;
    }

    .product_price_current {
        width: fit-content;
        font-size: 14px;
        font-weight: bold;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .product_number {
        width: 90px;
        float: left;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .product_number_content {
        width: fit-content;
        height: 24px;
        background: #eee;
    }

    .product_number_button {
        width: 24px;
        float: left;
        margin: 0px auto;
        border: 1px solid transparent;
    }

    .product_number_button button {
        width: 24px;
        height: 24px;
        outline: none;
        background: transparent;
        border: 1px solid transparent;
    }

    .product_number_button button:hover {
        background: transparent;
        border: 1px solid orange;
    }

    .product_number_input {
        width: fit-content;
        text-align: center;
        float: left;
        margin: 0px auto;
    }

    .product_number_input input {
        width: 30px;
        height: 24px;
        text-align: center;
        box-sizing: border-box;
    }

    .product_number_input input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    .product_number_input input::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

    .product_amount {
        width: 100px;
        float: left;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .product_total_price {
        width: 100px;
        font-size: 16px;
        color: rgba(255, 0, 0, 0.68);
        font-weight: bold;
        word-wrap: break-word;
    }

    .product_operation {
        width: 100px;
        float: left;
        height: 100%;
        display: flex;
        align-items: center;
        text-align: left;
        margin-left: 20px;
        line-height: 15px;
        color: #3c3c3c;
    }

    .product_operation button {
        width: fit-content;
        border: none;
        background: transparent;
        outline: none;
        font-size: 12px;
    }

    .product_operation button:hover {
        color: rgba(255, 0, 0, 0.65);
        text-decoration: underline;
    }

    .my_footer {
        width: 100%;
        height: 10vh;
        padding-top: 10px;
        margin-left: auto;
        font-size: 15px;
        padding-left: 12.5vw;
        padding-right: 9vw;
        border-top: 1px solid rgb(250, 149, 67);
        background-color: #fff;
    }

    .logo {
        margin-top: 15px;
        margin-left: 18px;
        height: 35px;
    }

    .footer_info {
        margin-top: 10px;
        display: inline;
        float: right;
    }
</style>